<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style>
			.chart {
				height: 250px;
				margin: 0px;
				padding: 0px;
			}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="stationAddress">近48小时统计图</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<h5 id="mtitle">柱图</h5>
				<div class="chart" id="mchart" ></div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/global.js" ></script>
		<script src="../../js/echarts-all.js"></script>
		<script type="text/javascript">
			function reloadview(){
				plus.webview.currentWebview().reload(true);
			}
			
			mui.init({
				beforeback: function(){
					plus.screen.lockOrientation("portrait-primary");
					return true;
				}
				//plus.webview.currentWebview().reload(true);
			});
			mui.plusReady(function(){
				plus.screen.lockOrientation("landscape-primary");
				var self=plus.webview.currentWebview();
				var type=self.type;
				var chart=self.chart;
				var title=self.title;
				var stationCode=self.stationCode;
				loadData(stationCode,type,chart,title);
				console.log('接收到的值为：');
			});
			
			var byId = function(id) {
				return document.getElementById(id);
			};
			var getOption = function(chartType,data,title) {
				var chartOption ={
					legend: {
						data: [title]
					},
					grid: {
						x: 35,
						x2: 10,
						y: 30,
						y2: 50
					},
					tooltip: {
        					trigger: 'axis',
        					axisPointer: {
            					type: 'line'
        					}
    					},
					toolbox: {
						show: true,
						feature: {
							magicType: {
								show: true,
								type: ['line', 'bar']
							}
//							,restore: {
//								show: true
//							}
						}
					},
					xAxis: [{
						type: 'category',
						data:data.xData,
						axisLabel:{  
                         interval:0,//横轴信息全部显示  
                         //rotate:60,//-30度角倾斜显示
                         formatter:function(value)
                            {
                               return value.split("/").join("\n");
                             }
                    		} 
					}],
					yAxis: [{
						type: 'value',
						splitArea: {
							show: true
						}
					}],
					series: [{
						name: title,
						type: chartType,
						data: data.yData
					}]
				};
				return chartOption;
			};
			var barChart = echarts.init(byId('mchart'));
			
			function loadData(stationCode,type,chart,title){
				mui.ajax(
					STATION_ECHART_DATA,
					{
						data:{
							stationCode:stationCode,
							type:type
						},
						dataType:'json',
						type:'get',
						success:function(data){
							document.getElementById("mtitle").innerText=title
							barChart.setOption(getOption(chart,data.obj,title));
						},
						error:function(xhr,type,error){
							mui.toast("服务器断开，请联系管理员。code："+type)
						}
					}
				)
			}
			
		</script>
	</body>

</html>